<template>
  <div class="login-container">
    <div class="pic-container">
      <img :src="require('@/assets/images/login/login.png')" />
    </div>
    <div class="input-container">
      <div class="input-box">
        <div class="input-title">系 统 管 理 平 台</div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="login-form"
        >
          <el-form-item label="" prop="loginname">
            <el-input
              placeholder="请输入用户名"
              v-model="ruleForm.loginname"
              @keyup.native.enter="enter('loginname')"
            >
              <i slot="prefix" class="el-input__icon"
                ><img :src="require('@/assets/images/login/user.png')"
              /></i>
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input
              placeholder="请输入密码"
              type="password"
              v-model="ruleForm.password"
              ref="password"
              @keyup.native.enter="enter('password')"
            >
              <i slot="prefix" class="el-input__icon"
                ><img :src="require('@/assets/images/login/pwd.png')"
              /></i>
            </el-input>
          </el-form-item>
        </el-form>
        <div class="help">
          <img :src="require('@/assets/images/login/icon-help.png')" alt="" />
          <p class="text">如账号登录遇到问题，请联系管理员</p>
        </div>
        <el-button
          type="primary"
          round
          class="submitBtn"
          :loading="loading"
          @click="submitForm('ruleForm')"
          >登录</el-button
        >
      </div>
      <div class="welcome">
        <p>欢迎使用平台管理系统，请输入用户名和密码登录系统</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      rules: {
        loginname: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
      ruleForm: {
        loginname: '',
        password: '',
      },
      loading: false,
    }
  },
  computed: {
    token() {
      return this.$store.getters.token
    },
  },
  created() {
    let loginErr = window.sessionStorage.getItem('loginErr')
    if (loginErr && this.token) {
      this.$store
        .dispatch('user/logout')
        .then(() => {})
        .catch(() => {})
      this.$alertFn.error('登录已过期，请重新登录')
    }
  },
  methods: {
    enter(key) {
      switch (key) {
        case 'loginname':
          this.$refs.password.focus()
          break
        case 'password':
          this.submitForm('ruleForm')
          break
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          this.$store
            .dispatch('user/login', this.ruleForm)
            .then(async () => {
              this.loading = false
              this.$router.push('/reception')
              switch (res.code) {
                case 1:
                  this.$store.commit('SET_TOKEN', res.data)
                  this.$router.push('/reception')
                  break
                default:
                  this.loading = false
                  this.warn.text = res.message ? res.message : res.msg
                  this.warn.show = true
              }
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          return false
        }
      })
    },
  },
}
</script>

<style scoped>
.login-container {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 1360px;
}
.pic-container {
  width: 60%;
  padding-top: 7%;
}
.input-container {
  width: 40%;
}
.input-container .input-box {
  width: 494px;
  height: 513px;
  background: rgba(254, 254, 254, 1);
  box-shadow: 0px 11px 15px 6px rgba(226, 234, 250, 0.7);
  border-radius: 10px;
  margin-top: 15%;
  margin-bottom: 69px;
  padding-top: 56px;
}
.input-container .input-box .input-title {
  text-align: center;
  font-size: 30px;
  font-family: HYDaHeiJ;
  font-weight: 600;
  color: rgba(58, 118, 231, 1);
  line-height: 38px;
  padding-bottom: 86px;
}
.input-container .input-box .login-form {
  width: 351px;
  margin: 0 auto;
}
.input-container .input-box .login-form .el-form-item {
  margin-bottom: 40px;
}
.input-container .input-box .help {
  padding: 46px 0 19px;
}
.input-container .input-box .help .text {
  display: inline-block;
  line-height: 16px;
  vertical-align: middle;
  color: rgba(102, 102, 102, 1);
  margin-left: 3px;
}
.input-container .input-box .submitBtn {
  width: 348px;
  height: 42px;
  font-size: 22px;
  line-height: 16px;
  padding: 10px 23px;
}
.input-container .welcome {
  width: 494px;
}
.input-container .welcome p {
  font-size: 18px;
  color: #333;
}
</style>
<style>
.input-container .input-box .login-form .el-input--prefix .el-input__inner {
  padding-left: 40px;
}
.input-container .input-box .login-form .el-input--prefix .el-input__prefix {
  padding-left: 4px;
}
.el-form-item__error {
  left: unset;
  right: 0;
}
</style>